<template>
  <!-- 增删改查 -->
  <div class="nav">
    <el-button type="primary" @click="dialogFormVisible = true" size="small"
      ><el-icon> <CirclePlusFilled /> </el-icon>新增</el-button
    >
    <el-button type="danger" @click="handleDelete" size="small"
      ><el-icon> <DeleteFilled /> </el-icon>删除</el-button
    >
    <!-- <el-button type="primary" @click="handleDerive"
      ><el-icon> <FolderOpened /> </el-icon>导出</el-button
    >
    <el-button type="primary" @click="handlePrint"
      ><el-icon> <Printer /> </el-icon>打印</el-button
    > -->
  </div>
  <div class="registration">
    <!-- 查询 -->
    <div class="inquire">
      <span>流程名称</span>
      <el-input v-model="input1" class="w-50 m-2" size="small" />
      <span>流程ID</span>
      <el-input v-model="input2" class="w-50 m-2" size="small" />
      <span>起止日期</span>
      <el-date-picker
        v-model="value"
        type="daterange"
        size="small"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
      <el-button
        type="primary"
        size="small"
        style="margin-left: 10px"
        @click="handleSearch"
        >查询</el-button
      >
    </div>

    <!-- 表格 -->
    <div class="main">
      <el-table ref="multipleTableRef" :data="registerInfo" style="width: 100%">
        <el-table-column type="selection" ref="checked" />
        <el-table-column
          property="ProcessID"
          label="流程ID"
          with="100%"
          show-overflow-tooltip
        />
        <el-table-column
          property="ProcessName"
          label="流程名称"
          with="100%"
          show-overflow-tooltip
        />
        <el-table-column
          property="promoter"
          label="发起人"
          show-overflow-tooltip
        />
        <el-table-column
          property="currentNode"
          label="当前节点"
          show-overflow-tooltip
        />
        <el-table-column
          property="results"
          label="审批结果"
          show-overflow-tooltip
        />
        <el-table-column property="status" label="状态" show-overflow-tooltip />
        <el-table-column
          property="startTime"
          label="发起时间"
          show-overflow-tooltip
        />
        <el-table-column
          property="endTime"
          label="结束时间"
          show-overflow-tooltip
        />

        <!-- 左侧操作按钮 -->
        <el-table-column fixed="left" label="操作" width="200px" align="center">
          <template #default="scope">
            <el-button type="danger" @click="handleRemove(scope.row)"
              >删除</el-button
            >
            <el-button
              type="primary"
              @click="handleView(scope.row)"
              :dialogVisible="dialogVisible"
              >修改</el-button
            >
            <el-button
              type="primary"
              @click="handleclick(scope.row)"
              :dialogTableVisible="dialogTableVisible"
              style="margin-right: 12px"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 对话框 -->
    <!-- 新增 -->
    <el-dialog
      v-model="dialogFormVisible"
      title="新增流程"
      width="30%"
      center
      :before-close="handleClose"
    >
      <el-form :model="form" class="el-form" :rules="rules">
        <el-form-item label="流程ID" required prop="ProcessID">
          <el-input v-model="form.ProcessID" />
        </el-form-item>
        <el-form-item label="流程名称" required>
          <el-input v-model="form.ProcessName" />
        </el-form-item>
        <el-form-item label="发起人" required>
          <el-input v-model="form.promoter" />
        </el-form-item>
        <el-form-item label="当前节点" required>
          <el-input v-model="form.currentNode" />
        </el-form-item>
        <el-form-item label="审批结果" required>
          <el-input v-model="form.results" />
        </el-form-item>
        <el-form-item label="状态" required>
          <el-input v-model="form.status" />
        </el-form-item>
        <el-form-item label="请假事由" required>
          <el-input
            v-model="form.reason"
            :rows="2"
            type="textarea"
            placeholder="Please input"
          />
        </el-form-item>
        <el-form-item label="发起时间" required>
          <div class="block">
            <el-date-picker
              v-model="form.startTime"
              type="date"
              placeholder="Pick a day"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </div>
        </el-form-item>
        <el-form-item label="结束时间" required>
          <div class="block">
            <el-date-picker
              v-model="form.endTime"
              type="date"
              placeholder="Pick a day"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitAndExit"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog
      v-model="dialogTableVisible"
      title="入库材料检验查看"
      width="90%"
    >
      <el-table :data="gridData">
        <el-table-column property="ProcessID" label="流程ID" />
        <el-table-column property="ProcessName" label="流程名称" />
        <el-table-column property="promoter" label="发起人" />
        <el-table-column property="currentNode" label="当前节点" />
        <el-table-column property="results" label="审批结果" />
        <el-table-column property="status" label="状态" />
        <el-table-column property="startTime" label="发起时间" />
        <el-table-column property="endTime" label="结束时间" />
        <el-table-column property="reason" label="请假原因" />
      </el-table>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      v-model="dialogVisible"
      title="修改"
      width="30%"
      center
      :before-close="handleClose"
    >
      <el-form :model="form" class="el-form">
        <el-form-item label="流程ID">
          <el-input v-model="form.ProcessID" />
        </el-form-item>
        <el-form-item label="流程名称">
          <el-input v-model="form.ProcessName" />
        </el-form-item>
        <el-form-item label="发起人">
          <el-input v-model="form.promoter" />
        </el-form-item>
        <el-form-item label="当前节点">
          <el-input v-model="form.currentNode" />
        </el-form-item>
        <el-form-item label="审批结果">
          <el-input v-model="form.results" />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="form.status" />
        </el-form-item>
        <el-form-item label="发起时间">
          <div class="block">
            <el-date-picker
              v-model="form.startTime"
              type="date"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </div>
        </el-form-item>
        <el-form-item label="结束时间">
          <div class="block">
            <el-date-picker
              v-model="form.endTime"
              type="date"
              :size="size"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="andExit"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <div class="foot">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        layout="total,prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import {
  getOfficeInfo,
  addOfficeInfo,
  deleteOfficeInfo,
  setOfficeInfo,
} from '@/api/getapi'
import { ElMessageBox, ElMessage } from 'element-plus'

//引入日期选择器

const size = ref<'default' | 'large' | 'small'>('small')

//引入文本域
// const textarea = ref('')

// 新增 数据 key:value
const form = ref<any>({
  ProcessID: '',
  ProcessName: '',
  promoter: '',
  currentNode: '',
  results: '',
  status: '',
  startTime: '',
  endTime: '',
  reason: '',
})
const dialogFormVisible = ref(false)
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确认关闭吗？关闭后无法保存信息！')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
// 新增提交
const submitAndExit = async () => {
  try {
    const forData = form.value
    console.log('fordata', forData)
    const result = await addOfficeInfo(forData)
    console.log('添加', result)
    form.value = {}
    dialogFormVisible.value = false
    ElMessage({
      message: '添加成功',
      type: 'success',
      duration: 1500,
    })
  } catch (error) {
    ElMessage({
      message: '材料编码重复，添加失败！',
      type: 'error',
      duration: 1500,
    })
  }
  getData()
}
//删除
const handleDelete = async (prod: any) => {
  try {
    const result = await deleteOfficeInfo(prod)
    console.log(result)
    ElMessage({
      message: '删除成功',
      type: 'success',
      duration: 1500,
    })
  } catch (error) {
    console.log(error)
  }
  getData()
}

//表格
const registerInfo = ref<ProjectInfo[]>([])
const tableData = ref<any>()
const getData = async () => {
  const result = await getOfficeInfo()
  tableData.value = result
  total.value = tableData.value.length
  show()
}
getData()

//表格修改数据
const dialogVisible = ref(false)
const handleView = async (prod: any) => {
  dialogVisible.value = true
  form.value = prod
}
//修改提交
const andExit = async () => {
  const result = await setOfficeInfo(form.value)
  dialogVisible.value = false
  console.log(result)
  ElMessage({
    message: '修改成功',
    type: 'success',
    duration: 1500,
  })

  getData()
}

//表格查看
const gridData = ref<any>()
const dialogTableVisible = ref(false)
const handleclick = (result: any) => {
  dialogTableVisible.value = true
  const arr = []
  arr.push(result)
  gridData.value = arr
}
//表格删除数据
const handleRemove = async (prod: any) => {
  try {
    const result = await deleteOfficeInfo(prod)
    console.log(result)
    registerInfo.value = result
    ElMessage({
      message: '删除成功',
      type: 'success',
      duration: 1500,
    })
  } catch (error) {
    console.log(error)
  }
  getData()
}

//分页器

const total = ref()
//分页器数据
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const show = () => {
  registerInfo.value = tableData.value.slice(
    pageSize4.value * (currentPage4.value - 1),
    pageSize4.value * currentPage4.value,
  )
}
watch([currentPage4, pageSize4], (val) => {
  console.log('val', val)
  show()
})

//查询
const value = ref('')
const input2 = ref('')
const input1 = ref('')
const handleSearch = () => {
  let obj: any = {}
  obj = {
    supplierName: input1.value,
    storageOdd: input2.value,
  }
  console.log(obj)
  // 排除空
  for (let key in obj) {
    if (obj[key] == '' || obj[key] == null) {
      delete obj[key]
    }
  }
  let filter = (condition: any, data: any) => {
    return data.filter((item: any) => {
      return Object.keys(condition).every((key) => {
        return String(item[key]).includes(String(condition[key]).trim())
      })
    })
  }
  registerInfo.value = filter(obj, tableData.value)
  if (value.value) {
    registerInfo.value = registerInfo.value.filter((item: any) => {
      return (
        new Date(item.storageDate).getTime() >
          new Date(value.value[0]).getTime() &&
        new Date(item.storageDate).getTime() <
          new Date(value.value[1]).getTime()
      )
    })
  }
  if (registerInfo.value.length == 0) {
    ElMessage({
      type: 'error',
      message: '没有相关信息',
    })
  }
}

//表单检验
const rules = {
  storageOdd: [{ required: true, message: '用户名必填!' }],
}
</script>

<style lang="less" scoped>
.inquire {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 1000px;
  height: 50px;

  span {
    margin: 0 10px;
    font-size: 15px;
  }

  .w-50 {
    width: 150px;
  }
}

.main {
  margin: auto;
  width: 98%;
  // height: 100%;
  border: 1px solid #ccc;

  .el-button {
    width: 40px;
    height: 15px;
  }
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.foot {
  position: fixed;
  right: 50px;
  bottom: 0;
  z-index: 1;
  margin: auto;
  background-color: #fff;
}

.el-button--text {
  margin-right: 15px;
}

.el-input {
  width: 100%;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  // margin-right: 15px;
  float: right;
  width: 350px;
  height: 40px;
}
</style>
